<template>
    <div class="map-view">
        <el-dialog :visible.sync="open" @close="close" title="" width="80%" :fullscreen="fullscreen" append-to-body>
            <template slot="title">
                <div class="dialog-title">
                    <span class="dialog-title-text">地图指挥</span>
                    <el-button type="text" @click="fullscreen = !fullscreen">
                        <i class="el-icon-full-screen"></i>
                    </el-button>
                </div>
            </template>
            <div id="map" ref="mapView" :style="renderViewStyle"></div>
        </el-dialog>
    </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import MapTool from "@/plugins/esri/mapTool.js";
import mapUtils from "@/plugins/esri/mapUtils";
import { getCameraListByGis } from "@/api/res/camera";
import MapCarListenerMixin from "../mixin/MapCarListenerMixin";
import { getResourceList } from "@/api/res/resource";
import { getAllUserLocation } from "@/api/system/user";

export default {
    name: "MapView",
    mixins: [dialogMixin, MapCarListenerMixin],
    props: {
        // 坐标
        center: {
            type: Array,
            default: () => {
                return null;
            },
        },
    },
    data() {
        return {
            mapView: null,
            zoom: 1,
            mapTool: null,
            fullscreen: false,
            eventInfo: null,
            userMarkers: [],
        };
    },
    mounted() {},
    computed: {
        renderViewStyle() {
            // 宽为屏幕可是区域宽度的80%-40px
            if (!this.fullscreen) {
                return {
                    width: `${document.documentElement.clientWidth * 0.8 - 40}px`,
                    height: `${document.documentElement.clientHeight * 0.8 - 80}px`,
                };
            } else {
                return {
                    width: `${document.documentElement.clientWidth - 40}px`,
                    height: `${document.documentElement.clientHeight - 120}px`,
                };
            }
        },
    },
    methods: {
        showMap(param) {
            this.eventInfo = param.eventInfo;
            this.open = true;
            this.$nextTick(() => {
                this.getMap();
            });
        },
        getMap() {
            this.mapTool = new MapTool();
            this.mapTool.initMapView("map", { zoom: this.zoom }).then(res => {
                this.mapView = res;
                this.mapView.when(() => {
                    // 地图点击事件
                    // this.mapView.on("click", e => {
                    //     this.mapTool.clearAllMarker();
                    //     // 转化成经纬度
                    //     mapUtils.transformCoordinate(e.mapPoint, 4326).then(res => {
                    //         let point = [res.latitude, res.longitude];
                    //         console.log(point);
                    //         // 打个标记在地图上
                    //         mapUtils.buildMarker({ center: point, attributes: {} }).then(marker => {
                    //             this.mapTool.addMarker(marker);
                    //             this.pickedPoint = point;
                    //         });
                    //     });
                    // });
                    this.markEvent();
                    this.renderCameras();
                    this.renderResources();
                    this.renderUsers();
                    this.startCarListener();

                    // 标记点击
                    this.mapView.on("click", e => {
                        this.mapView.hitTest(e).then(response => {
                            // 检查点击的目标是否是标记
                            if (response.results.length > 0) {
                                // TODO 这里做标记识别，目前默认打开一个摄像头
                                // const graphic = response.results[0].graphic;
                                // if (graphic.attributes && graphic.attributes.id) {
                                //     console.log("标记被点击了，ID:", graphic.attributes.id);
                                //     // 在这里添加你想要执行的操作
                                // }
                                this.$emit("openCamera");
                            }
                        });
                    });
                });
            });
        },
        markEvent() {
            // 添加事件标记
            mapUtils.buildEventPoint({ center: this.eventInfo.eventCenter, attributes: {}, label: this.eventInfo.eventName }).then(marker => {
                this.mapTool.addLabelIconMarker(marker);
                this.mapTool.setCenter(this.eventInfo.eventCenter, 3);
            });
        },
        renderCameras() {
            getCameraListByGis().then(res => {
                // 转换坐标
                res.data.forEach(async item => {
                    let point = await mapUtils.buildPointWithWkid([item.latitude, item.longitude], this.mapView.spatialReference);
                    mapUtils.transformCoordinate(point, 4326).then(res => {
                        // 添加摄像头标记
                        mapUtils.buildCameraPoint({ center: res, attributes: {}, label: item.deviceName }).then(marker => {
                            this.mapTool.addLabelIconMarker(marker);
                        });
                    });
                });
            });
        },
        renderResources() {
            getResourceList().then(res => {
                // 转换坐标
                res.data.forEach(async item => {
                    let point = await mapUtils.buildPoint([item.latitude, item.longitude]);
                    let newCenter = await mapUtils.transformCoordinate(point, this.mapView.spatialReference);
                    // 添加摄像头标记
                    mapUtils.buildResourcePoint({ center: newCenter, attributes: {}, label: item.name }).then(marker => {
                        this.mapTool.addLabelIconMarker(marker);
                    });
                });
            });
        },
        renderUsers() {
            getAllUserLocation().then(res => {
                if (this.userMarkers.length > 0) {
                    this.userMarkers.forEach(marker => {
                        this.mapTool.removeMarker(marker);
                    });
                }
                // 转换坐标
                res.data.forEach(async item => {
                    let location = item.location.split(",");
                    let point = await mapUtils.buildPoint([location[0], location[1]]);
                    let newCenter = await mapUtils.transformCoordinate(point, this.mapView.spatialReference);
                    // 添加摄像头标记
                    mapUtils.buildUserPoint({ center: newCenter, attributes: {}, label: item.userName }).then(marker => {
                        this.mapTool.addLabelIconMarker(marker);
                        this.userMarkers.push(marker);
                    });
                });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.dialog-title {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    .dialog-title-text {
        font-size: 16px;
        font-weight: bold;
        color: white;
        margin-right: 10px;
    }
}
</style>
